﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-ui/ui-bootstrap.js"></script>
    <script src="/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
    <script src="DatepickerDemoCtrl.js"></script>
    <link type="text/css" rel="stylesheet" href="/Content/bootstrap.css" />

</head>
<body ng-app="ui.bootstrap.demo">

    <div ng-controller="DatepickerDemoCtrl">
        <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

        <h4>Inline</h4>
        <div style="display:inline-block; min-height:290px;">
            <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
        </div>

        <h4>Popup</h4>
        <div class="row">
            <div class="col-md-6">
                <p class="input-group">
                    <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>

            <div class="col-md-6">
                <p class="input-group">
                    <input type="date" class="form-control" datepicker-popup ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
            </div>
        </div>

        <hr />
        <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
        <button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
        <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
        <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
    </div>
    <style>
        .full button span {
            background-color: limegreen;
            border-radius: 32px;
            color: black;
        }

        .partially button span {
            background-color: orange;
            border-radius: 32px;
            color: black;
        }
    </style>
</body>
</html>
